<template>
  <div>

    <el-button class="fm" type="text" @click="dialog = true">
      <el-button round>点我开始预约</el-button>
    </el-button>


    <el-drawer title="填写您的联系方式" :before-close="handleClose" :visible.sync="dialog" direction="ltr"
      custom-class="demo-drawer" ref="drawer">
      <div class="demo-drawer__content">
        <el-form :model="form">
          <el-form-item label="您的名字" :label-width="formLabelWidth">
            <el-input v-model="form.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="手机号码" :label-width="formLabelWidth">
            <el-input v-model="form.number" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="地址" :label-width="formLabelWidth">
            <el-input v-model="form.address" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="服务内容" :label-width="formLabelWidth">
            <el-select v-model="form.service" placeholder="请选择活动区域">
              <el-option label="保洁服务" value="保洁服务"></el-option>
              <el-option label="家电维修" value="家电维修"></el-option>
              <el-option label="保姆月嫂" value="保姆月嫂"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div class="demo-drawer__footer">
          <el-button @click="cancelForm">取 消</el-button>
          <el-button type="primary" @click="$refs.drawer.closeDrawer()" :loading="loading">
            {{ loading ? '提交中 ...' : '确定' }}
          </el-button>
        </div>
      </div>
    </el-drawer>
    <HKView></HKView>
  </div>

</template>



<script>
import axios, { Axios } from 'axios';
import HKView from './../HKView.vue'
export default {
  components: { HKView },
  data() {
    return {
      table: false,
      dialog: false,
      loading: false,

      form: {
        name: '',
        number: '',
        service: '',
        address: '',

      },
      formLabelWidth: '80px',
      timer: null,
    };
  },
  mounted() {


  },
  methods: {
    handleClose(done) {
      if (this.loading) {

        return;
      }
      this.$confirm('确定要提交表单吗？')
        .then(_ => {

          this.loading = true;
          this.timer = setTimeout(() => {
            done();
            // 动画关闭需要一定的时间
            setTimeout(() => {
              this.loading = false;
            }, 400);
          }, 2000);
          const data = this.form


          axios.post("http://localhost:8080/service", this.form).then((res) => {


          })
        })

        .catch(_ => { });
    },

    cancelForm() {
      this.loading = false;
      this.dialog = false;
      clearTimeout(this.timer);
    }
  }
}
</script>

<style scoped>
.fm {
  position: absolute;
  top: 500px;
  left: 80px;
}

.demo-drawer__content {
  padding: 30px;
}

.demo-drawer__footer {
  margin-top: 30px;
  margin-left: 10px;
}
</style>